/* pages/chat/index.wxss */
page {
	background-color: #F9F9F9FF;
}

// 商铺信息
.shopinfo-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	background-color: #fff;
	padding: 0 32rpx;
	color: #303030FF;
	position: sticky;
	top: 0;
	z-index: 99;

	.title {
		font-size: 28rpx;
	}

	.right-box {
		display: flex;
		align-items: center;
		grid-gap: 32rpx;
		font-size: 20rpx;

		.icon-box {
			flex: 1;
			text-align: center;
		}
	}
}

// 聊天消息
.chat-container {
	margin: 32rpx 32rpx 0;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx);

	.chat-item {
		display: flex;
		margin-bottom: 40rpx;

		.msg-content {
			max-width: 440rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin: 0 24rpx;
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			color: #06021AFF;
		}

		&.self {
			flex-direction: row-reverse;

			.msg-content {
				padding: 24rpx 44rpx 26rpx 44rpx;
				border-radius: 44rpx;
				background-color: #FF7733FF;
				color: white;
			}
		}
	}
}

.send-container {
	height: 72rpx;
	background-color: white;
	position: fixed;
	left: 0;
	bottom: 0;
	width: calc(100vw - 64rpx);
	padding: 16rpx 32rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
	display: flex;
	grid-gap: 26rpx;
	align-items: center;

	.input-box {
		flex: 1;
		height: 72rpx;
		border-radius: 36rpx;
		padding: 0 24rpx;
		font-size: 24rpx;
		background-color: #F6F6F6FF;
	}

	.send-btn {
		width: 120rpx;
		height: 72rpx;
		border-radius: 36rpx;
	}
}